<template>
  <div>
    <el-dialog title="操作历史" :visible.sync="dialogVisible" width="50%">
      <el-timeline>
        <el-timeline-item v-for="item of records" :key="item.id" :timestamp="item.createTime" placement="top">
          <el-card shadow="never" :body-style="{padding:'0px'}">
            <div slot="header" class="clearfix">
              <span>{{item.operateNameCN}}</span>
              <el-button v-if="item.operateName=='update'" style="float: right; padding: 3px 0"
                @click="showUpdateDetail(item)" type="text">详细</el-button>
            </div>
            <p v-if="item.detail!=null" v-html="item.detail" style="padding-left:1rem;"></p>
            <div v-if="item.operateDetailShow">
              <el-table :data="item.operateDetailRecords" style="width: 100%">
                <el-table-column prop="fieldCN" label="属性" width="180">
                </el-table-column>
                <el-table-column prop="oldValueCN" label="旧值" width="280">
                  <template slot-scope="scope">
                    <p v-if="scope.row.field!='interviewTime'">{{scope.row.oldValueCN}}</p>
                    <p>
                      <el-date-picker v-if="scope.row.field=='interviewTime'" v-model="scope.row.oldValueCN"
                        :readonly="true" type="datetime" placeholder="">
                      </el-date-picker>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column prop="newValueCN" label="新值">
                  <template slot-scope="scope">
                    <p v-if="scope.row.field!='interviewTime'">{{scope.row.newValueCN}}</p>
                    <p>
                      <el-date-picker v-if="scope.row.field=='interviewTime'" v-model="scope.row.newValueCN"
                        :readonly="true" type="datetime" placeholder="">
                      </el-date-picker>
                    </p>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        records: []
      }
    },
    methods: {
      init(data) {
        this.dialogVisible = true
        let id = data.resumeId
        console.log(id)
        this.getData(id)
      },
      getData(id) {
        this.$http({
          url: `${this.$http.adornUrl('/resumeLog/?token='+this.$cookie.get('token') )}`,
          method: 'get',
          params: this.$http.adornParams({
            resumeId: id
          })
        }).then(({
          data
        }) => {
          if (data['code'] == 0) {
            console.log(data)
            this.records = this.filter(data.records)
          } else {
            this.$message({
              message: '数据获取错误',
              type: 'warning'
            });
          }
        })
      },
      filter(records) {
        for (let i = 0; i < records.length; i++) {
          let operate = records[i].operateName
          if (operate == 'update') {
            records[i].operateNameCN = "更新"
          } else if (operate == 'forward') {
            records[i].operateNameCN = "转发"
          } else if (operate == 'download') {
            records[i].operateNameCN = "下载"
          }
          records[i].operateDetailRecords = []
          records[i].operateDetailShow = false
        }
        return records
      },
      detailFilter(records) {
        for (let i = 0; i < records.length; i++) {
          let operateField = records[i].field
          if (operateField == 'status') {
            records[i].fieldCN = '状态'
            records[i].newValueCN = this.formatStatus(records[i].newValue)
            records[i].oldValueCN = this.formatStatus(records[i].oldValue)
          } else if (operateField == 'interviewTime') {
            records[i].fieldCN = '面试时间'
            records[i].newValueCN = records[i].newValue
            records[i].oldValueCN = records[i].oldValue
          }

        }
        return records
      },
      showUpdateDetail(item) {
        let id = item.id
        item.operateDetailShow = !item.operateDetailShow;
        if (item.operateDetailShow == false) {
          return
        }
        this.$http({
          url: `${this.$http.adornUrl('/resumeLog/operateDetail/'+id+'?token='+this.$cookie.get('token') )}`,
          method: 'get'
        }).then(({
          data
        }) => {
          if (data['code'] == 0) {
            item.operateDetailRecords = this.detailFilter(data.records)
          } else {
            this.$message({
              message: '数据获取错误',
              type: 'warning'
            });
          }
        })
      },
      formatStatus(val) {
        if (val == 0) {
          return '未处理'
        } else if (val == 1) {
          return '不符合要求'
        } else if (val == 2) {
          return '已转发'
        } else if (val == 3) {
          return '已通知'
        } else if (val == 4) {
          return '已笔试'
        } else if (val == 5) {
          return '一面通过'
        } else if (val == 6) {
          return '一面未通过'
        } else if (val == 7) {
          return '二面通过'
        } else if (val == 8) {
          return '二面未通过'
        } else if (val == 9) {
          return '已录用'
        } else if (val == 10) {
          return '已过期'
        }else if (val == 11) {
          return '待定'
        }
      },

    }
  }

</script>
